import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Rectangle {

    //header
    Item{
        id:headerRcg
        //radius:10
        anchors.top:parent.top
        width:parent.width
        height:20
        Row{
           anchors.fill:parent
           spacing:10
           Rectangle{
               id:selectAllBox
               width:15
               height:15
               radius: 3
               border.width:1
               property bool allSelected:false

               Text{
                   id:selected
                   anchors.fill: parent
                   text:"√"
                   color:"red"
                   visible: selectAllBox.allSelected
               }
               MouseArea{
                   anchors.fill: parent
                   onClicked: {
                    selectAllBox.allSelected = !selectAllBox.allSelected
                    for(let i=0;i<yourListModel.count;i++){
                        yourListModel.setProperty(i,"isSelected",selectAllBox.allSelected)
                    }
                   }
               }
           }
           Repeater{
                model:["IP","addr","Type"]
                delegate:Label{
                    width:30
                    text:modelData
                    color:"#fdafde"
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            parent.color = "#cdaaee"
                        }
                        onExited:{
                            parent.color = "#fdafde"
                        }
                        onClicked: {
                            parent.color = "#ffeecc"
                        }
                    }
                }
           }
        }
    }
    ListView {
        id: listView
        anchors.top:headerRcg.bottom
        anchors.bottom:parent.bottom
        anchors.left:parent.left
        anchors.right:parent.right
        model: yourListModel // 假设这是你的数据模型
        // Rectangle{
        //     anchors.fill: parent
        //     border.width: 2
        //     border.color:"blue"
        // }

        delegate: RowLayout {
            //delegate: Rectangle {
                CheckBox {
                    checked: isSelected
                    onClicked: {
                        yourListModel.setProperty(index,"isSelected",checked)
                        var allSelected=true
                        for(var i = 0; i < yourListModel.count; i++) {
                            if(!yourListModel.get(i).isSelected) {
                                allSelected = false
                                break
                            }
                        }
                        selectAllBox.allSelected = allSelected
                    }
                }
                Label { text: ip }
                Label { text: addr }
                Label { text: type }
                Layout.fillWidth: true
            }
            ScrollBar.vertical: ScrollBar {
                width: 10
                policy: ScrollBar.AlwaysOn
            }
    }

    ListModel {
        id: yourListModel
        ListElement { ip: "192.168.1.1"; addr: "Addr1"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.2"; addr: "Addr2"; type: "DVR"; isSelected: false }
        ListElement { ip: "192.168.1.3"; addr: "Addr3"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.1"; addr: "Addr1"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.2"; addr: "Addr2"; type: "DVR"; isSelected: false }
        ListElement { ip: "192.168.1.3"; addr: "Addr3"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.1"; addr: "Addr1"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.2"; addr: "Addr2"; type: "DVR"; isSelected: false }
        ListElement { ip: "192.168.1.3"; addr: "Addr3"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.1"; addr: "Addr1"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.2"; addr: "Addr2"; type: "DVR"; isSelected: false }
        ListElement { ip: "192.168.1.3"; addr: "Addr3"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.1"; addr: "Addr1"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.2"; addr: "Addr2"; type: "DVR"; isSelected: false }
        ListElement { ip: "192.168.1.3"; addr: "Addr3"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.1"; addr: "Addr1"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.2"; addr: "Addr2"; type: "DVR"; isSelected: false }
        ListElement { ip: "192.168.1.3"; addr: "Addr3"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.1"; addr: "Addr1"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.2"; addr: "Addr2"; type: "DVR"; isSelected: false }
        ListElement { ip: "192.168.1.3"; addr: "Addr3"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.1"; addr: "Addr1"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.2"; addr: "Addr2"; type: "DVR"; isSelected: false }
        ListElement { ip: "192.168.1.3"; addr: "Addr3"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.1"; addr: "Addr1"; type: "IPC"; isSelected: false }
        ListElement { ip: "192.168.1.2"; addr: "Addr2"; type: "DVR"; isSelected: false }
        ListElement { ip: "192.168.1.3"; addr: "Addr3"; type: "IPC"; isSelected: false }
    }
}
